<template>
  <div class="app-container">
    <el-card class="card">
      <div class="card-header">审批中心</div>
      <div class="proc-info">
        <div class="item" @click="toApprove(2)">
          <div class="value wait-color">{{approvalBoard.waitNum || 0}}</div>
          <div class="label">待处理</div>
        </div>
        <div class="item" @click="toApprove(3)">
          <div class="value">{{approvalBoard.handledNum || 0}}</div>
          <div class="label">已处理</div>
        </div>
        <div class="item" @click="toApprove(1)">
          <div class="value">{{approvalBoard.startedNum || 0}}</div>
          <div class="label">已发起</div>
        </div>
        <div class="item" @click="toApprove(4)">
          <div class="value">{{approvalBoard.notifyNum || 0}}</div>
          <div class="label">我收到的</div>
        </div>
      </div>
    </el-card>

    <el-card class="card">
      <div class="card-header">全部审批单</div>
      <div class="card-body">
        <div class="proc-type" v-for="(items, key) in procList" :key="key">
          <div class="proc-type-title">{{key}}</div>
          <div class="proc-type-items">
            <div class="item" v-for="proc in items" :key="proc.procId" @click="toCreateProc(proc.procId)">
              <svg-icon icon-class="edit" class="item-icon"/>
              <div class="item-name">{{proc.procName}}</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <CreateProc ref="createProcRef" @close="closeCreateProc"/>
  </div>
</template>

<script setup>
import {getProcForGroup} from "@/api/bpm/proc";
import {getApprovalBoard} from "@/api/bpm/inst";
import CreateProc from "@/views/bpm/components/CreateProcInst.vue";
import {getCurrentInstance, ref} from "vue";

const { proxy } = getCurrentInstance();

const open = ref(false);
const procList = ref([]);
const createProcRef = ref(null);
const approvalBoard = ref({});

function getProc() {
  getProcForGroup().then(response => {
    procList.value = response.data;
  });
}
function getBoard() {
  getApprovalBoard().then(response => {
    approvalBoard.value = response.data;
  });
}

function init() {
  getProc()
  getBoard()
}

function toCreateProc(procId) {
  createProcRef.value.show(procId)
}

function closeCreateProc() {
  init()
  open.value = false
}

/**
 * 跳转到审批中心
 * @param searchType
 */
function toApprove(searchType) {
  proxy.$router.push({
    path:'/bpm/approve',
    query: {
      searchType: searchType
    }
  })
}
init()
</script>

<style scoped lang="scss">
.card {
  margin-bottom: 18px;
  color: #303133;
  .card-header {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
  }
}

.proc-info {
  display: flex;
  flex-direction: row;
  width: 100%;

  .item {
    width: 100px;
    margin: 0 30px;
    text-align: center;
    cursor: pointer;
    font-weight: bolder;

    .value {
      font-size: 32px;
    }
    .label {
      font-size: 14px;

    }
  }
  .wait-color {
    color: #F56C6C;
  }
}

.proc-type {
  width: 100%;
  margin-bottom: 18px;
  .proc-type-title {
    font-weight: bold;
    font-size: 16px;
  }
  .proc-type-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .item {
      width: 200px;
      padding: 10px;
      margin: 10px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;

      .item-icon {
        width: 40px;
        height: 40px;
        padding: 10px;
        border-radius: 10px;
        color: #0c7bee;
        //background-color: #7fd4fc;
      }
      .item-name {
        //margin-left: 5px;
      }
    }
    .item:hover {
      background-color: #F2F3F5;
      border-radius: 10px;
    }
  }
}
</style>